<!--
 * @页面名称:全文预览
 * @描述: 
 * @作者: 
 * @Date:
-->
<template>
  <div>
    <el-drawer v-model="props.visible" :title="`电子文件预览(${fileNmme})`" :size="'100%'" :before-close="handleClose">
      <div class="preview">
        <div class="pdf-content">
          <!-- 电子文件预览模块(主要指pdf等文件) -->
          <iframe v-if="showFileType === 'pdf'" :src="src" width="100%" height="100%" frameborder="0"></iframe>
          <!-- 图片展览模块 -->
          <img-viewer v-if="showFileType === 'img'" :images="fileList" />
          <!-- <imgage-viewer v-if="showFileType === 'img'"></imgage-viewer> -->
          <!-- <img-viewer v-if="showFileType === 'img'" :images="fileList" /> -->
          <!-- 视频预览模块 -->
          <div v-else-if="['video', 'audio'].includes(showFileType)" style="width: 80%; margin: auto">
            <vue-plyr v-if="showFileType === 'audio'">
              <audio controls playsinline>
                <source :src="audioSrc" :type="type" />
              </audio>
            </vue-plyr>
            <vue-plyr v-else>
              <video controls playsinline>
                <source size="720" :src="videoSrc" :type="type" />
              </video>
            </vue-plyr>
          </div>
          <!-- xml和Json预览模块 -->
          <div v-else-if="showFileType === 'xml'" class="xmlCode">
            <codemirror v-model:value="xmlCode" :tabSize="2" :options="editorOption"> </codemirror>
          </div>
          <!-- txt预览页面 -->
          <iframe
            style="background: #fff"
            v-if="showFileType === 'txt'"
            :src="txtSrc"
            width="100%"
            height="100%"
            frameborder="0"
          ></iframe>
          <!-- ofd预览 -->
          <!-- <div style="height: 100%" v-if="showFileType === 'ofd'">
            <OFD :url="ofdSrc" :title="fileNmme"></OFD>
          </div> -->
          <iframe v-if="showFileType === 'ofd'" :src="ofdSrc" width="100%" height="100%" frameborder="0"></iframe>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import axios from "axios";
import { ref, PropType, toRefs, reactive, onMounted } from "vue";
// import ImgViewer from "./ImgPreview.vue";
import ImgViewer from "./components/ImgViewer.vue";
import vkbeautify from "vkbeautify";
// json和xml预览插件
import Codemirror from "codemirror-editor-vue3";
// 编辑器代码格式
import "codemirror/mode/javascript/javascript.js";
// 自动刷新(防止codemirror需要手动刷新才出数据)
import "codemirror/addon/display/autorefresh";
import { imgType, videoType, audioType, xmlType, txtType, jsonType, ofdType } from "./ts/contentType";
import ACrypto from "@/utils/crypto";
// import OFD from "./OFD.vue";
export interface IProps {
  FileName: string;
  src: string;
  name: string;
  Path: string;
}
const props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false;
    }
  },
  fileList: {
    type: Array as PropType<IProps[]>,
    default: () => {
      return;
    }
  },
  download: {
    type: Boolean,
    default: false
  },
  print: {
    type: Boolean,
    default: false
  },
  type: {
    type: String,
    default: ""
  },
  keyword: {
    type: String,
    default: ""
  },
  page: {
    type: Number,
    default: 1
  }
});
const emit = defineEmits(["updataVisible"]);
const fileNmme = ref(""); //文件名称
const showFileType = ref("pdf"); //文件类型
const src = ref(""); //pdf预览地址
const audioSrc = ref(""); // 音频地址
const videoSrc = ref(""); //视频地址
const xmlCode = ref("");
const txtSrc = ref(""); //txt文件地址
const ofdSrc = ref<any>("");
const editorOption = reactive({
  // 代码编辑框配置
  autorefresh: true,
  tabSize: 4,
  mode: "text/javascript",
  // theme: "ayu-mirage",
  line: true,
  viewportMargin: Infinity, //处理高度自适应时搭配使用
  highlightDifferences: true,
  autofocus: false,
  indentUnit: 2,
  smartIndent: true,
  readOnly: true, // 只读
  showCursorWhenSelecting: true,
  firstLineNumber: 1
});

if (["application/pdf"].includes(props.type)) {
  // 展示pdf类型
  showFileType.value = "pdf";
  const preFile = import.meta.env.VITE_STATIC + ACrypto.getSS(toRefs(props).fileList.value[0].src);
  fileNmme.value = ACrypto.getSS(toRefs(props).fileList.value[0].name);
  src.value = `/pdfjs/web/viewer.html?file=${encodeURIComponent(preFile)}&print=${props.print}&download=${
    props.download
  }&keyword=${props.keyword || ""}#page=${props.page || 1}`;
} else if (imgType.includes(props.type)) {
  // 图片展示
  props.fileList.forEach(item => {
    item.Path = import.meta.env.VITE_STATIC + ACrypto.getSS(item.Path);
  });
  fileNmme.value = ACrypto.getSS(toRefs(props).fileList.value[0].FileName);
  showFileType.value = "img";
} else if (videoType.includes(props.type)) {
  // 视频展示
  showFileType.value = "video";
  fileNmme.value = ACrypto.getSS(toRefs(props).fileList.value[0].FileName);
  videoSrc.value = import.meta.env.VITE_STATIC + ACrypto.getSS(toRefs(props).fileList.value[0].Path);
} else if (audioType.includes(props.type)) {
  showFileType.value = "audio";
  fileNmme.value = ACrypto.getSS(toRefs(props).fileList.value[0].FileName);
  audioSrc.value = import.meta.env.VITE_STATIC + ACrypto.getSS(toRefs(props).fileList.value[0].Path);
} else if (xmlType.includes(props.type)) {
  // xml和json文件直接预览展示
  const preFile = import.meta.env.VITE_STATIC + ACrypto.getSS(toRefs(props).fileList.value[0].src);
  fileNmme.value = ACrypto.getSS(toRefs(props).fileList.value[0].name);
  showFileType.value = "xml";
  axios.get(preFile).then(res => {
    if (jsonType.includes(props.type)) {
      xmlCode.value = vkbeautify.json(res.data);
    } else {
      xmlCode.value = vkbeautify.xml(res.data);
    }
  });
} else if (txtType.includes(props.type)) {
  // txt文件预览展示
  const preFile = import.meta.env.VITE_STATIC + ACrypto.getSS(toRefs(props).fileList.value[0].src);
  fileNmme.value = ACrypto.getSS(toRefs(props).fileList.value[0].name);
  showFileType.value = "txt";
  axios({
    url: preFile,
    method: "get",
    responseType: "blob"
  }).then(res => {
    const fileReader = new FileReader();
    fileReader.readAsDataURL(res.data);
    fileReader.onload = (e: any) => {
      txtSrc.value = e.target.result;
    };
  });
} else if (ofdType.includes(props.type)) {
  // ofd预览
  fileNmme.value = ACrypto.getSS(toRefs(props).fileList.value[0].FileName);
  showFileType.value = "ofd";
  const preFile = import.meta.env.VITE_STATIC + ACrypto.getSS(toRefs(props).fileList.value[0].Path);
  // ofdSrc.value = preFile;
  ofdSrc.value = `/sc-reader/viewer.html?file=${encodeURIComponent(preFile)}&SearchText=${"上海市"}`;
} else {
  console.log("无类型");
}
// 关闭弹窗
const handleClose = () => {
  emit("updataVisible", false);
};
</script>

<style lang="scss">
.el-drawer__header {
  text-align: center;
}
.preview {
  width: 100%;
  height: 100%;
  display: flex;
}

.pdf-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>
<style lang="scss">
.xmlCode {
  .CodeMirror {
    height: auto !important;
  }
}
</style>
